import React, { PureComponent } from "react"
import { connect } from "react-redux"
import { CityWrap,TopBtn } from "@/components/main/index/section/styled"
import { loadCityDataAsync, SET_CURRENT_CITY, loadIndexDataAsync, loadTourrecommendAsync, loadHotsrecommendAsync } from "@/components/main/index/actionCreator"

class City extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            isCity: true,
            style:{
                background:"rgba(225,235,245,0.3)",
              
                // opacity:1
            }
        }
    }
    render() {
        // className={`${this.state.tempindex === index?'active':''}`}
        return this.state.isCity ? (
            <TopBtn>
            <div className="btn_search" style={this.state.style} >

                <div onClick={() => {
                    this.setState({ isCity: !this.state.isCity })
                }} > {this.props.currentCity.name}
                </div>
                <div>
                    <span></span>
                    <span></span>
                </div>
                <div></div>

            </div>
            </TopBtn>

        ) : (
                <CityWrap>
                    <div className="left">
                        <ul>
                            {
                                this.props.cityList.map((item, index) => (
                                    <li key={index}> <h1>{item.id}</h1>
                                        <ul>
                                            {
                                                item.list.map((it, dex) => (
                                                    <li className="citys" key={dex} onClick={
                                                        this.props.handleCity.bind(this, it)
                                                    }>
                                                        {it.name}
                                                    </li>
                                                ))
                                            }
                                        </ul>
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                    <div className="right">
                        <ul>
                            {
                                this.props.cityList.map((item, index) => (
                                    <li key={index}>
                                        {item.id}
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                </CityWrap>
            )
    }
    componentDidMount() {
        this.props.getCityData.bind(this)()
        window.addEventListener('scroll', this.props.handleScroll.bind(this));
       
      
         
    }
}
// immutaable数据

const mapStateToProps = (state) => {
    // console.log(state.getIn(["indexReducer","indexTopData"]).toJS());
    // console.log(state.getIn(["indexReducer","currentCity"]).toJS());

    return {
        cityList: state.getIn(['indexReducer', 'cityList']),
        currentCity: state.getIn(['indexReducer', 'currentCity']).toJS(),
        indexTopData: state.getIn(["indexReducer", "indexTopData"]),
    }
}
const mapDispatchToProps = (dispatch) => ({
    handleCity(it) {
        let temp = it
        temp.type = SET_CURRENT_CITY  //action
        let currentCity = {
            city_id: it.id,
            abbreviation: it.Abbreviation,
            name: it.name
        }
        dispatch(temp)
        dispatch(loadTourrecommendAsync(dispatch, it.id))
        dispatch(loadHotsrecommendAsync(dispatch, it.id))
        this.props.getIndexData(currentCity)
        this.setState({ isCity: !this.state.isCity })
    },
    handleScroll(event){
        // let ctx=this;
        // let clientHeight = document.documentElement.clientHeight; //可视区域高度
        let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度
        // let scrollHeight =document.documentElement.scrollHeight; //滚动内容高度
        if(scrollTop==0){
            this.setState({ style: {  background:"rgba(225,235,245,0.5)"}})
        }else
        {
            this.setState({ style: {  background:"rgba(225,235,245,1)"} })
        }
       
    },
    getCityData() {
        dispatch(loadCityDataAsync(dispatch))
    },
    getIndexData(currentCity) {
        dispatch(loadIndexDataAsync(dispatch, currentCity))

    }
})
export default connect(mapStateToProps, mapDispatchToProps)(City)


